import React, { Component } from 'react'

export default class Father extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>组件化和组件的props</p>
        <p>在jsx中给子组件添加的多数属性会作为子组件的props值</p>
        <p>props值变化也会触发子组件的重渲染</p>
        <p>就像本页的count值一样</p>
        <p>以screen为例，我为count升级了显示功能，创建了一个screen组件</p>
        <p>screen负责更好的ui显示，而至于其中的值是什么，并不需要关心</p>
        <p>也就是说screen不仅仅可以在这个计数器页面使用</p>
        <p>这就是组件化</p>
    </div>
    static official = 'https://react.docschina.org/docs/components-and-props.html'
    state = {
        count: 0
    }
    add = () => {
        this.setState({ count: this.state.count + 1 })
    }
    reset = () => {
        this.setState({ count: 0 })
    }
    render() {
        return (
            <div>
                <div>Counter2.0</div>
                <div><Screen text={this.state.count} /></div>
                <div>
                    <ActionBtn actions={{
                        add: this.add,
                        reset: this.reset
                    }} />
                </div>
            </div>
        )
    }
}

// 创造了一个Screen组件，去做一个炫酷的文字展示
class Screen extends Component {
    render() {
        return <div className='diaozhatian-screen'>
            <div>一个炫酷的显示屏</div>
            <div>{this.props.text}</div>
        </div>
    }
}

const style = {
    row: {
        display: 'flex'
    },
    btn: {
        height: '24px',
        lineHeight: '24px',
        padding: '0 16px',
        borderRadius: '12px',
        backgroundColor: '#0170fe',
        color: '#fff',
        marginRight: '10px',
        userSelect: 'none'
    }
}

class ActionBtn extends Component {
    render() {
        return <div>
            一个独立的触发器
            <div style={style.row}>
                <div style={style.btn} onClick={this.props.actions.add}>+1</div>
                <div style={style.btn} onClick={this.props.actions.reset}>reset</div>
            </div>
        </div>
    }
}